<template>
    <div>
        <el-button
                size="mini"
                type="danger"
                @click="addRow">添加</el-button>
        <!-- 表单 -->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="updateRow(scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteRow(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <!-- 分页 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>

        <!--  添加表单  -->
        <el-dialog
                title="添加信息"
                :visible.sync="dialogVisible1"
                width="30%">
            <el-form ref="tjform" :model="tjstudentFrom" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="tjstudentFrom.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="tjstudentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="tjstudentFrom.address"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addF">添加</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button @click="xiao">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--  修改表单  -->
        <el-dialog
                title="修改信息"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="form" :model="studentFrom" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="studentFrom.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="studentFrom.age"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="studentFrom.address"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="alterss">修改</el-button>
                    <el-button @click="guan">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Student",
        data(){
            return {
                tableData:[],
                pageSize:5,
                currentPage:1,
                total:0,
                //修改弹框
                dialogVisible:false,
                //添加弹框
                dialogVisible1:false,

                studentFrom:{},
                tjstudentFrom:{},
            }
        },
        //页面加载完毕执行
        created() {
            this.initTable();
        },
        //定义方法
        methods:{
            //主页--分页查询
            initTable(){
                this.$http.get("http://localhost:8001/select?currentPage="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    if (resp.data.code==200){
                        this.tableData=resp.data.data.records;
                        this.total=resp.data.data.total;
                    }else if (resp.data.code==4001){
                        this.$message.error("未登录");
                        this.$router.push("/")
                    }
                })
            },
            //分页-大小
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //分页-页数
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            //添加的触发事件
            addRow(){
                /* 显示对话框 */
                this.dialogVisible1=true;
            },
            //取消添加
            xiao(){
                this.dialogVisible1=false;
            },
            //添加
            addF(){
                this.$http.post("http://localhost:8001/add",this.tjstudentFrom).then(resp=>{
                    console.log("dddd"+resp.data)
                    if (resp.data.code==200){
                        this.$message.success("添加成功");
                        //关闭弹出层
                        this.dialogVisible1=false;
                        //重新加在表格上
                        this.initTable();
                    }
                    this.tjstudentFrom={};
                })
            },
            //添加时重置
            resetForm(){
              this.tjstudentFrom={};
            },
            //修改的触发事件
            updateRow(row){
                /* 显示对话框 */
                this.dialogVisible=true;
                /* 绑定表单 */
                this.studentFrom=row;
            },
            //取消修改
            guan(){
                this.dialogVisible=false;
            },
            //修改
            alterss(){
                console.log(this.studentFrom)
                this.$http.put("http://localhost:8001/update",this.studentFrom).then(resp=>{
                    if (resp.data.code==200){
                        this.$message.success("修改成功");
                        //关闭弹出层
                        this.dialogVisible=false;
                        //重新加在表格上
                        this.initTable();
                    }
                })
            },
            //删除
            deleteRow(id){
                this.$http.delete("http://localhost:8001/delete?id="+id).then(resp=>{
                    if (resp.data.code==200){
                        this.$message.success("删除成功");
                        //重新加在表格上
                        this.initTable();
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>